<template>
  <div>
    <el-transfer
     class="tm-transfer"
      v-model="value"
      :right-default-checked="['C001']"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="输入遥测名称/描述搜索"
      :data="tmList"
      :titles="['遥测', '自定义遥测']"
      v-bind="$attrs" 
      @change="handleChange">
    </el-transfer>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, defineEmits } from 'vue'
import { fetchNavigateList, fetchAllTmList } from '@/api/loads-api'

const value = ref([])
const tmList = ref ([])
const emit = defineEmits(['change'])


onMounted(() => {
  initData()
})

const filterMethod = (query, item) => {
  return item.label.toLowerCase().includes(query.toLowerCase())
}

const initData = () => {
  getTms()
}

const getTms = () => {
  fetchAllTmList({}, (response)=> {
    const resData = response.data.excel.sheets || []
    let arr = []
    for ( const sheet of resData) {
      const rows = sheet.rows || []
      const rootName = sheet.name || ''
      let child = {}
      for (const row of rows) {
        child = {
          key: row.name,
          label: `${rootName}->${row.name} ${row.description}`
        }
        arr.push(child)
      }
    }
    tmList.value.push(...arr)
  },(err) => {
    console.log("fetch tm list failed！", err)
  })
}

const getNavTms = () => {
    fetchNavigateList({}, (response) => {
      const resData = response.data.data.rows
      let arr = []
      for(const item of resData){
        let child = {
          key: item.name,
          label: `nav->${item.name} ${item.description}`
        }
        arr.push(child)
      }
      tmList.value.push(...arr)
    }, (error) => {
      console.log("error:", error)
    })
}

const handleChange = (rightValue) => {
  emit('input', rightValue)
}
</script>

<style lang="scss" scoped>
.tm-transfer {
  --el-transfer-panel-width: 280px;
  --el-transfer-panel-body-height: 400px;
}
</style>